<!-- 设置动态表单组件--右侧抽屉设置栏 -->
<template>
  <div class="drawer">
    <div class="drawer-title">
      <div class="txt">{{ getComponent?.componentName }}</div>
      <div>
        <span class="icon-delete iconfont icon" />
      </div>
    </div>
    <a-form
      ref="formRef"
      layout="vertical"
      class="form"
      auto-label-width
      :model="selectItem"
      label-align="left"
      :rules="rules"
      v-if="selectItem?.uuid"
    >
      <a-form-item field="cnName" label="中文名:">
        <a-input
          placeholder="请输入组件中文名称"
          v-model="selectItem.cnName"
          @change="checkUnique('cn_name', form.data.cnName)"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="enName" label="英文名:">
        <a-input
          placeholder="请输入组件英文名称"
          v-model="selectItem.enName"
          @change="checkUnique('en_name', form.data.enName)"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="fieldName" label="字段名:">
        <a-input
          placeholder="请输入字段名称"
          v-model="selectItem.fieldName"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="是否开启:">
        <a-switch
          v-model="selectItem.enable"
          :checkedValue="1"
          :uncheckedValue="2"
          size="small"
        />
      </a-form-item>
      <a-form-item label="是否必填:">
        <a-switch
          v-model="selectItem.required"
          :checkedValue="1"
          :uncheckedValue="2"
          size="small"
        />
      </a-form-item>
      <a-form-item label="隐藏名称">
        <a-switch
          v-model="selectItem.props.hideTitle"
          :checkedValue="1"
          :uncheckedValue="2"
          size="small"
        />
      </a-form-item>
      <!-- <a-form-item label="布局方式:" v-if="selectItem.props?.layout">
        <a-space direction="vertical" size="large">
          <a-radio-group v-model="selectItem.props.layout">
            <a-radio :value="1">表格</a-radio>
            <a-radio :value="2">表单</a-radio>
          </a-radio-group>
        </a-space>
      </a-form-item> -->
      <a-form-item label="是否用于条件">
        <a-switch
          v-model="selectItem.isUseCondition"
          :checkedValue="1"
          :uncheckedValue="2"
          @change="isUseConditionChange"
          size="small"
        />
      </a-form-item>
      <a-form-item v-if="selectItem.isUseCondition === 1" label="条件类型">
        <a-select :style="{ width: '320px' }" placeholder="Please select ...">
          <a-option>Beijing</a-option>
          <a-option>Shanghai</a-option>
          <a-option>Guangzhou</a-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="显示区域:">
        <a-radio-group
          type="button"
          v-model="form.data.span"
          
        >
          <a-radio :value="12">50%</a-radio>
          <a-radio :value="24">100%</a-radio>
        </a-radio-group>
      </a-form-item> -->

      <ExtendedFields
        :props="selectItem?.props"
        :showFieldList="getComponent?.showFieldList"
        :uuid="selectItem.uuid"
        @propsChange="propsChange"
      />
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import type { Control } from '@/apis/control/type';
import { componentList } from '../../../setUpConfig';
import ExtendedFields from './ExtendedFields.vue';
import * as api from '@/apis/index';
import useForm from '@/hooks/useForm';

const { selectItem } = useForm();

const rules = {
  cnName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写中文名称'
    }
  ],
  enName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写英文名称'
    }
  ],
  fieldName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写字段名称'
    }
  ]
};
//根据组件code返回组件信息
const getComponent = computed(() => {
  if (!selectItem.value) return;

  return componentList.find(
    (item) => item.componentType === selectItem.value.componentType
  );
});

const form = reactive<{ data: Control }>({ data: { props: {} } });

const propsChange = (backProps: any) => {
  //props发生改变
  selectItem.value.props = {
    ...backProps
  };
};
const formRef = ref();
//查重

const checkUnique = async (
  singleParamName: 'en_name' | 'cn_name',
  value?: string
) => {
  if (!value) return;
  let res: any = await api.checkUnique({
    singleParamName,
    value,
    funcType: 4
  });

  if (res?.code === 4000) {
    if (singleParamName === 'cn_name') {
      formRef.value.setFields({
        cnName: { status: 'error', message: res.msg }
      });
    } else {
      formRef.value.setFields({
        enName: { status: 'error', message: res.msg }
      });
    }
    return;
  }
};
//用于条件的控件必填
const isUseConditionChange = (e: string | number | boolean) => {
  if (e !== 1) return;
  selectItem.value.required = 1;
  selectItem.value.conditionTypeId = 1;
};
defineExpose({ formRef });
</script>

<style lang="less" scoped>
.drawer {
  // width: 350px;
  // position: absolute;
  height: 100%;
  // background: #fff;
  // top: 0;
  // bottom: 0;
  // height: 100%;
  transition-property: all;
  transition-duration: 0.3s;
  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;
    .icon {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.form {
  padding: 10px;
  box-sizing: border-box;
}
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

// /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

// /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}
</style>
